<template>
  <div class="animation">
    <img src="@/assets/love.png" alt="">
  </div>
</template>

<script>
export default {
  name: "animation",
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang='less' scoped>
.animation {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
  img {
    // animation: myfirst 2s steps(1 , end) infinite;
    animation-name: myfirst;
    animation-duration: 1s;
    animation-timing-function: steps(1, start);
    // animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

@keyframes myfirst {
  0% {
    transform: translateX(-0px);
  }
  10% {
    transform: translateX(-100px);
  }
  20% {
    transform: translateX(-200px);
  }
  30% {
    transform: translateX(-300px);
  }
  40% {
    transform: translateX(-400px);
  }
  50% {
    transform: translateX(-500px);
  }
  60% {
    transform: translateX(-600px);
  }
  70% {
    transform: translateX(-700px);
  }
  80% {
    transform: translateX(-800px);
  }
  90% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(-900px);
  }
}
</style>